<template>
  <div class="header">
    <div class="logo" :class="{'is-active':sidebarStatus}">
      <img src="@/assets/logo.png" alt="">
      <div class="logo-tiele" :class="{'is-active':sidebarStatus}">Analysis</div>
    </div>
    <div class="navbar">
      <div class="btn"  @click="HandlesidebarTodo">
        <span class="el-icon-back" :class="{'is-active':sidebarStatus}"></span>
      </div>
      <el-dropdown v-if='username'  trigger="click">
          <span class="el-dropdown-link">
            <span>{{username}}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logout">退出 </el-dropdown-item>
          </el-dropdown-menu>
      </el-dropdown>
      <template v-else>
        <router-link class="to-login" to='/login'>点击登录</router-link>
      </template>
    </div>

  </div>
</template>

<script>
import { mapMutations,mapGetters } from 'vuex'

export default {
  name: 'Header',
  data () {
    return {
      menuBtn: 'el-icon-newfont-caidan',
    }
  },
  computed: {
    ...mapGetters({
         sidebarStatus: 'sidebarTodos',
         username:'username'
    })
  },
  watch:{

  },
  methods: {
    ...mapMutations({
      HandlesidebarTodo: "changSiderStatus"
    }),
    logout () {
      this.$confirm('是否退出账户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.bindLogout()
        this.$router.push({
          path: '/login'
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .header{
    width :100%;
    height :50px;
    display :flex;
    background :rgb(85, 85, 145);
    .logo{
      width :200px;
      height :50px;
      background :#1e8fc6;
      color :#fff;
      text-indent :15px;
      font-size :18px;
      line-height :50px;
      font-weight :600;
      transition : .4s ease;
      display :flex;
      overflow: hidden;
      img{
        vertical-align: middle;
        margin-left: 16px;
        margin-right: 16px;
        margin-top: 10px;
        height:30px;
        width:30px;

      }
      .is-active{
        display: none;
      }
    }
    .is-active{
      width :64px;
    }  
    .navbar{
      flex :1;
      display: flex;
      align-items :center;
      justify-content :space-between;
      padding :0 10px;
      padding-right: 30px;
      color :#fff;
      .btn{
        height :50px;
        line-height :50px;
        cursor: pointer;
        transition :.4s ease;
        .is-active{
          transform: rotateY(180deg);
        }
        span{
          font-size :28px;
          line-height :50px;
          transition :0.5s;
          color :#ffffff;
          font-weight :bold;
        }  
      }
      .to-login{
        font-size :14px;
        line-height :50px;
        font-weight: bold;
        color :#ffffff;
      } 
      .el-dropdown-link{
        color :#fff;
        font-weight: bold;
        cursor :pointer;
        span{
          font-size :18px;
          line-height :50px;
          color :#ffffff;
        }
      }
    }
      
  @media all and (max-width: 768px) {
    .header .logo.is-active {
      width: 0;
      overflow: hidden;
    }
  }
  }

</style>
